<template>
  <div class="arm">
    <div class="tooltips">
      <span>{{ $t("提示由于诊断分析数据过多系统自动清理7天之前的数据") }}</span>
    </div>
    <div class="chartBox">
      <div class="chartShadow cpu" ref="cpuChart">
        <div class="header">
          <div class="title">{{ $t("CPU使用率") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="startTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'mainChart', 'lineChartAll0')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('cpu')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          ref="mainChart"
          :times="times"
          :lineChartAll="lineChartAll0"
        ></lineChart>
      </div>
      <div class="chartShadow gpu" ref="gpuChart">
        <div class="header">
          <div class="title">{{ $t("GPU使用率") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="pguStartTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'gpuAll', 'lineChartAll1')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('gpu')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          :lineChartAll="lineChartAll1"
          ref="gpuAll"
          :times="times"
        ></lineChart>
      </div>
      <div class="chartShadow storage" ref="storageChart">
        <div class="header">
          <div class="title">{{ $t("内存使用率") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="storageStartTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'memory', 'lineChartAll2')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('storage')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          :lineChartAll="lineChartAll2"
          ref="memory"
          :times="times"
        ></lineChart>
      </div>
      <div class="chartShadow disk" ref="diskChart">
        <div class="header">
          <div class="title">{{ $t("磁盘使用率") }}</div>
          <div class="selectGroup">
            <el-date-picker
              v-model="diskStartTime"
              type="datetimerange"
              size="medium"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="ChangeTime($event, 'disk', 'lineChartAll3')"
            >
            </el-date-picker>
            <img
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('disk')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <lineChart
          :lineChartAll="lineChartAll3"
          ref="disk"
          :times="times"
        ></lineChart>
      </div>
    </div>
  </div>
</template>
<script>
import lineChart from "./components/lineChart.vue";
import screenfull from "screenfull";
import { API_getArmVersion } from "@/api/log/arm";
export default {
  name: "arm",
  components: {
    lineChart,
  },
  props: {},
  data() {
    return {
      // 折线图下边的时间
      times: [],
      // 折线图数据
      lineChartAll0: [
        {
          name: this.$t("CPU使用"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          name: this.$t("CPU剩余"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      lineChartAll1: [
        {
          name: this.$t("GPU使用"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          name: this.$t("GPU剩余"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      lineChartAll2: [
        {
          name: this.$t("内存使用"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          name: this.$t("内存剩余"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      lineChartAll3: [
        {
          name: this.$t("磁盘使用"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#73F6AF",
          },
        },
        {
          name: this.$t("磁盘剩余"),
          type: "line",
          // stack: "Total",
          textStyle: {
            color: "#00D1FF",
          },
        },
      ],
      startTime: "",
      pguStartTime: "",
      storageStartTime: "",
      diskStartTime: "",
    };
  },
  computed: {},
  created() {
    this.objAnalysis();
  },
  methods: {
    // 折线图搜索
    ChangeTime(val, type, e) {
      console.log(val);
      if (val) {
        this.objAnalysis({ startTime: val[0], endTime: val[1] }, type, e);
      }
    },
    fullScreen(type) {
      if (!screenfull.isEnabled) {
        this.$message({ message: "你的浏览器不支持全屏", type: "warning" });
        return false;
      }
      switch (type) {
        case "cpu":
          screenfull.toggle(this.$refs.cpuChart);
          break;
        case "gpu":
          screenfull.toggle(this.$refs.gpuChart);
          break;
        case "storage":
          screenfull.toggle(this.$refs.storageChart);
          break;
        case "disk":
          screenfull.toggle(this.$refs.diskChart);
          break;
      }
    },
    /**获取折线图数据 */
    objAnalysis(time, type, e) {
      API_getArmVersion(time).then((res) => {
        if (res.data[0]) {
          //cpu
          this.lineChartAll0[0].data = res.data[0].cpu
            .split(",")
            .map((item) => {
              return Number(item);
            });
          this.lineChartAll0[1].data = res.data[0].cpu
            .split(",")
            .map((item) => {
              return Number(item);
            });
          //gpu
          this.lineChartAll1[0].data = res.data[0].gpu
            .split(",")
            .map((item) => {
              return Number(item);
            });
          this.lineChartAll1[1].data = res.data[0].gpu
            .split(",")
            .map((item) => {
              return Number(item);
            });
          // 内存使用率;
          this.lineChartAll2[0].data = res.data[0].memory
            .split(",")
            .map((item) => {
              return Number(item);
            });
          this.lineChartAll2[1].data = res.data[0].memory
            .split(",")
            .map((item) => {
              return Number(item);
            });
          // 磁盘使用率
          this.lineChartAll3[0].data = res.data[0].disk
            .split(",")
            .map((item) => {
              return Number(item);
            });
          this.lineChartAll3[1].data = res.data[0].disk
            .split(",")
            .map((item) => {
              return Number(item);
            });
          // 获取折线图下边的时间
          this.times = res.data[0].createTime.split(",").map((item) => {
            return item;
          });
          // 通过ref获取不同的搜索
          this.$refs[type].initChart(this[e]);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.arm {
  padding: 0 24px;
}
.chartShadow {
  width: 49.6%;
  height: 382px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.cpu,
.gpu,
.storage,
.disk {
  position: relative;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 16px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #00d1ff;
      display: flex;
      align-items: center;
    }
    .selectGroup {
      .chat {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 16px;
      }
    }
  }
}
::v-deep {
  input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
  }
}
</style>
